// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

class ScrollList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: []
    };
    this.wrapper = React.createRef();
  }

  addMessage = () => {
    this.setState(state => ({messages: [`${state.messages.length}`, ...state.messages]}))
  }

  componentDidMount() {
    this.timer = window.setInterval(() => {
      this.addMessage();
    }, 1000)
  }

  componentWillUnmount() {
    window.clearInterval(this.timer);
  }

  /**
  getSnapshotBeforeUpdate() 钩子函数被调用于 render 函数之后， 可以读取但无法使用DOM的时候。
  它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。
  此生命周期返回的任何值都将作为参数传递给 componentDidUpdate()
   */
  getSnapshotBeforeUpdate () {
    // 这里获取更新前的 DOM 的相关信息
    return {
      prevScrollTop: this.wrapper.current.scrollTop,
      prevScrollHeight: this.wrapper.current.scrollHeight
    }
  }

  componentDidUpdate(prevProps, prevState, {prevScrollTop, prevScrollHeight}) {
    console.log(prevScrollTop, prevScrollHeight)
    this.wrapper.current.scrollTop = prevScrollTop + (this.wrapper.current.scrollHeight - prevScrollHeight);
  }

  render() {
    const style = {
      height: '100px',
      width: '200px',
      border: '1px solid red',
      overflow: 'auto'
    }
    //<div key={index}>里不要加空格!
    return (
      <div style={style} ref={this.wrapper} >
        {
          this.state.messages.map((message, index) => (
            <div key={index}>{message}</div>
          ))
        }
      </div>
    );
  }
}


ReactDOM.render(
  <ScrollList />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",


// 新的生命周期中多了
// getDerivedStateFromProps 从新的属性(props)映射新的状态(state)对象
// getSnapShopBeforeUpdate 真正的 DOM 更新可以获取老的 DOM 的快照
// 新的生命周期中少了
// componentWillMont
// componentWillUpdate
// componentWillReceiveProps